<!-- 任务列表 -->
<template>
    <div class='task'>
    <search ref="mysearch"
                @doReset="doReset"
                @doQuery="doRefresh"
                :ruleform="ruleForm">
        <template slot="top">
          <el-form-item label="序列号："
                        prop="id">
            <el-input type="input"
                      v-model="ruleForm.id"
                      placeholder="请输入类型"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="优先级：" prop="priority">
            <el-select v-model="ruleForm.priority" placeholder="请选择优先级">
              <el-option label="普通"
                         value="1"></el-option>
              <el-option label="低"
                         value="2"></el-option>
              <el-option label="高"
                         value="3"></el-option>
              <el-option label="紧急"
                         value="4"></el-option>
              <el-option label="立刻"
                         value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="负责人："
                        prop="headUser">
            <el-select v-model="ruleForm.headUser" placeholder="请选择负责人">
              <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指派给："
                        prop="dealUser">
            <el-select v-model="ruleForm.dealUser" placeholder="请选择指派人员" clearable>
              <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="发布时间：" prop="createDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createDate" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
        </template>
        <div slot="foot">
            <el-form-item label="类别："
                        prop="firstTypeId">
            <el-radio-group v-model="ruleForm.firstTypeId" >
                <el-radio :label="item.id" v-for="item in firstOption" :key="item.id">{{item.className}}</el-radio>
            </el-radio-group>
            </el-form-item>
        </div>
      </search>
      <myTable ref="mytable"
               :config="tableconfig"
               @handleSelectChange="handleSelectChange">
        <div slot="mytablebody">
        </div>
        <!-- 主题 -->
        <template v-slot:topic="{ data }">
          <el-link class="blue-link"
                   @click="getDetail(data.ID)">
            {{data.topic}}
          </el-link>
        </template>
        <!-- 操作 -->
        <template v-slot:operation="{ data }">
            <el-button type="primary" @click="handleAssign(data.id)">指派</el-button>
            <el-button type="primary" @click="handleReply(data)">回复</el-button>
            <el-button type="primary" @click="handleSolve(data.id)">解决</el-button>
        </template>
         <!-- 操作 -->
      </myTable>
      <!-- 指派 -->
      <el-dialog :visible.sync="dialogAssignVisible" title="指派人员"  width="30%" class="assignDialog">
        <el-form class="frompad">
          <el-form-item label="指派给FAE：" prop="operateName">
            <el-select v-model="operateName" placeholder="请选择指派人员" @change="changeValue">
              <el-option :label="item.userName" :value="item.userId" v-for="item in options" :key="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table
          :data="assignData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="操作"
            align="center"
            width="100">
            <template slot-scope="scope">
              <i class="el-icon-delete icondize" @click="deleteName"></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="id"
            align="center"
            label="ID">
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="goSubmit" size="medium">提交</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="dialogTableVisible"  title="回复" width="40%">
        <order-replay :acticleInfo = "acticleInfo" :topic="topic"></order-replay>
      </el-dialog>
      <el-dialog :visible.sync="dialogSolveVisible" width="30%" class="solveClass">
        <el-form :model="solveForm">
          <el-form-item label="解决方案：" prop="solvePlan" :label-width="formLabelWidth">
            <el-select v-model="solveForm.solvePlan" placeholder="请选择解决方案">
              <el-option label="解决" value="2"></el-option>
              <el-option label="延期处理" value="3"></el-option>
              <el-option label="关闭" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="fileUrls" label="附件：" :label-width="formLabelWidth">
              <el-upload class="upload-demo" ref="uploadFile" :action="upload_file_url" :headers="upHeaders" multiple :limit="5" :before-upload="beforeReplyAvatarUpload" :on-remove="handleReplyRemove"
                  :on-success="handleReplySuccess"
                  :on-exceed="handleReplyExceed">
                  <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
          </el-form-item>
          <el-form-item label="备注：" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="solveForm.summary"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getSolve">确 定</el-button>
        </div>
      </el-dialog>
       
    </div>
  </template>
  
  <script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import { getToken } from "@/utils/auth";
  import {searchList,getFaeOption,firstTypeOption,assignOrder,repairOrderInfo,orderSolve,deleteByFilePath  } from '@/api/order.js';
  import orderReplay from '@/components/orderReplay';
  export default {
    components:{
      orderReplay,
    },
    data () {
      return {
        operateName:'',
        options:[],
        firstOption:[],
        ruleForm: {
          id: '',
          createDate:'',
          headUser: '',
          priority: '',
          dealUser: '',
          firstTypeId:'',
          pageNo:1,
          pageSize:20,
        },
        tableconfig: {
            loading: false,
            isselection: true,
            ispagination: true,
            tabledata: [
            ],
            isindex: true,
            thead: [
              { sort: null, label: '序列号', prop: 'id', width: 150 },
              { sort: null,  prop: 'headUsername',label: '负责人',  width: 120 },
              { sort: null, label: '类别', prop: 'firstTypeName', width: 120 },
              { sort: null, label: '优先级', prop: 'priority', width: 120,},
              { sort: null, label: '状态', prop: 'status', width: 120 },
              { sort: null, label: '主题', prop: 'topic',type: 'slot'},
              { sort: null, label: '创建时间', prop: 'createTime', width: 150 },
              { sort: null, label: '指派给', prop: 'dealUsername', width: 150 },
              { sort: null, label: '更新时间', prop: 'updateTime', width: 150 },
              { sort: null, label: '操作', prop: 'operation',type: 'slot',width: 250  },
                
            ],
            currentpage: 1,
            pagesize: 0,
            total: 0,
        },
        assignData:[
        ],
        orderId:0,
        headId:'',
        // 当前选中的行数据
        selectrow: [],
        //弹出框状态
        dialogAssignVisible:false,
        dialogTableVisible:false,
        dialogSolveVisible:false,
        solveForm:{
          solvePlan:"",
          id:0,
          summary:"",
          fileUrls:[],
        },
        upload_file_url: process.env.VUE_APP_BASE_API + '/api/v1/file/uploadImage?category=fileList',
        upHeaders:{
          'Authorization':"10cbce37a0a14f9a9d2305baac613b51",
          'Token':'Bearer '+ getToken()
        },
        formLabelWidth: '100px',
        acticleInfo:{},
        topic:'',
       
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handleSelectChange(section) {
          this.selectrow = section;
      },
      // 选项
      getOption(){
        getFaeOption().then(res=>{
          console.log(res,'选项');
          if(res.code == 200){
              this.options = res.result;
          }
        })
        firstTypeOption().then(res=>{
          if(res.code == 200){
              this.firstOption = res.result;
          }
        })
      },
      // 重置搜索
      doReset() {
        console.log(Object.keys(this.ruleForm).slice(0,-2),'this.ruleForm');
          Object.keys(this.ruleForm).slice(0,-2).map(x => {
              this.ruleForm[x] = '';
          });
          console.log(this.ruleForm,'this.ruleForm.pageSize');
          this.$message({
              message: '已重置',
              type: 'success',
          });
          this.doRefresh();
      },
      // 刷新
      doRefresh() {
          //页码从第一页开始
          this.tableconfig.currentpage = 1;
          //表格回到顶部
          this.$refs.mytable.$emit('handleGoTop');
          this.doQuery();
      },
      //搜索
      async doQuery() {
          // 获取表格
          this.tableconfig.loading = true;
          this.tableconfig.currentpage = this.ruleForm.pageNo;
          this.tableconfig.pagesize = this.ruleForm.pageSize;
          let data1 = await searchList(this.ruleForm);
          console.log(data1);
          if(data1.success){
            this.tableconfig.total = data1.result.count;
            this.tableconfig.tabledata = data1.result.data;
          }
          this.tableconfig.loading = false;
      },
      // 页码数更新
      handleSizeChange(val) {
          this.tableconfig.currentpage = 1;
          this.tableconfig.pagesize = val;
          this.doQuery();
          //表格回到顶部
          this.$refs.mytable.$emit('handleGoTop');
      },
      // 当前页码更新
      handleCurrentChange(val) {
          this.tableconfig.currentpage = val;
          this.doQuery();
          //表格回到顶部
          this.$refs.mytable.$emit('handleGoTop');
      },
      // 指派
      handleAssign(id){
        this.orderId = id;
        this.dialogAssignVisible = true;
      },
      changeValue(val){
        let objAssign = {};
        this.options.map(item=>{
          if(item.userId == val){
            this.headId = val;
            objAssign = {
              id:val,
              name:item.userName
            }
          }
        })
        this.assignData = [];
        this.assignData.push(objAssign)
        // console.log(this.assignData,'this.assignData');
      },
      // 删除
      deleteName(){
        this.assignData = [];
        this.operateName = '';
      },
      // 提交
      goSubmit(){
        if(this.operateName){
          assignOrder(this.orderId,this.headId).then(res=>{
            if(res.success == true){
              this.dialogAssignVisible = false;
              this.doQuery();
            }
          })
        }else{
          this.$message.warning('请选择指派人员')
        }
        
      },
      // 回复
      handleReply(data){
        console.log(data,'22222');
        this.topic = data.topic;
        repairOrderInfo(data.id).then(res=>{
          if(res.success == true){
            this.acticleInfo = res.result;
            console.log(this.acticleInfo,'内容');
          }
        })
        this.dialogTableVisible = true;
      },
      handleSolve(id){
        this.solveForm.id = id;
        console.log(id,'333333');
        this.dialogSolveVisible = true;
      },
      getSolve(){
        orderSolve(this.solveForm).then(res=>{
          console.log(res,'2222222');
          if(res.success == true){
            this.dialogSolveVisible = false;
          }
        })
      },
        // 上传文件尺寸
        beforeReplyAvatarUpload(file){
            console.log(file);
            const isLt5M = file.size / 1024 / 1024 < 5;
            if (!isLt5M) {
                this.$message.error('上传文件大小不能超过 5MB!');
            }
            return isLt5M;
        },
          // 文件上传超出限制
        handleReplyExceed(files, fileList){
            this.$message.warning('不能超过5个文件上传')
        },
        // 上传文件删除
        handleReplyRemove(file, fileList){
            console.log(file.response.result.absoluteUrl, fileList);
            this.solveForm.fileUrls.forEach((item,index)=>{
                if(file.response.result.absoluteUrl == item.url){
                    let params = {
                        filePath: item.url
                    }
                    deleteByFilePath(params).then(res=>{
                        console.log(res,'path');
                        if(res.code==200){
                            this.$message.success("删除成功");
                            this.replyParams.fileUrls.splice(index,1);
                        }
                    })
                }
            })
            
        },
         // 上传文件成功
        handleReplySuccess(response, file, fileList){
            let fileBox = {};
            if(response.code == 200){
                this.$message.success("上传成功");
                let fileName = response.result.originalFileName;
                let fileType = fileName.substring(fileName.lastIndexOf('.')+1);
                let fileSize = file.raw.size;
                if(fileType === 'jpg' || fileType ==='png' || fileType ==='jpeg' || fileType ==='gif'){
                    this.$set(fileBox,'type',2)
                }else{
                    this.$set(fileBox,'type',1)
                }
                this.$set(fileBox,'fileName',fileName)
                this.$set(fileBox,'fileSize',fileSize)
                this.$set(fileBox,'url',response.result.absoluteUrl)
                this.solveForm.fileUrls.push(fileBox);
                console.log(this.solveForm.fileUrls,'数组');
            }

        },
      handlesortChange(column) {
          this.ruleForm.orderbyname = column.prop;
          this.doQuery();
      },
      getDetail(id){
        console.log(id,'33333333');
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.doQuery();
        this.getOption();
    },
    mounted () {
      
    },
  }
  </script>
  <style scoped lang="scss">
  @import './../../assets/reset.css';
  .task{
      padding: 15px;
  }
  .blue-link{
    color: #1890ff;
  }
  .frompad{
    padding:0 20px;
    .el-select{
      width: 65%;
    }
    
  }
  .icondize{
    font-size: 16px;
    color:#E02020;
  }
  .dialog-footer{
    text-align: center;
  }
  .solveClass{
    .el-select{
      width: 100%;
    }
   
  }
  
  </style>